<script setup lang="ts">
import { ref, watch, computed, onMounted, unref, nextTick } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useOtherStore } from '@/store/modules/other'
import { useDesign } from '@/hooks/web/useDesign'
import { ElDrawer, ElTree } from 'element-plus'
import { sysProjectDataList } from '@/api/backstage'
import { SUCCESS_CODE } from '@/constants'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('logo')

const appStore = useAppStore()
const otherStore = useOtherStore()

const show = ref(true)
const drawer = ref(false)

const title = computed(() => appStore.getTitle)

const layout = computed(() => appStore.getLayout)

const collapse = computed(() => appStore.getCollapse)
const projectData = ref([])
const ElTreeRef = ref()
const treeProps = {
  label: 'name',
  children: 'children',
  disabled: 'disabled'
}
onMounted(async () => {
  if (unref(collapse)) show.value = false
  const res = await sysProjectDataList()
  if (res.code === SUCCESS_CODE) {
    projectData.value = res.data
  }
})

const openDrawer = async () => {
  drawer.value = true
  await nextTick()
  unref(ElTreeRef)?.setCurrentKey(otherStore.getProjectId)
}

const handleNodeClick = (data: any) => {
  // otherStore.setProjectId(data.id)
  otherStore.setProjectInfo(data)
  drawer.value = false
  // TODO: 这里需要重新加载数据,重新获取菜单等操作...
}

watch(
  () => collapse.value,
  (collapse: boolean) => {
    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
      show.value = true
      return
    }
    show.value = !collapse
  }
)

watch(
  () => layout.value,
  (layout) => {
    if (layout === 'top' || layout === 'cutMenu') {
      show.value = true
    } else {
      if (unref(collapse)) {
        show.value = false
      } else {
        show.value = true
      }
    }
  }
)
</script>

<template>
  <div>
    <!-- <router-link
      :class="[
        prefixCls,
        layout !== 'classic' ? `${prefixCls}__Top` : '',
        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
      ]"
      to="/"
    > -->
    <div
      :class="[
        prefixCls,
        layout !== 'classic' ? `${prefixCls}__Top` : '',
        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
      ]"
      @click="openDrawer"
    >
      <img
        src="@/assets/imgs/logo.png"
        class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
      />
      <div
        v-if="show"
        :class="[
          'ml-10px text-16px font-700',
          {
            'text-[var(--logo-title-text-color)]': layout === 'classic',
            'text-[var(--top-header-text-color)]':
              layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
          }
        ]"
      >
        {{ title }}
      </div>
    </div>
    <!-- </router-link> -->
    <el-drawer v-model="drawer" title="切换项目" direction="ltr" size="300px">
      <ElTree
        ref="ElTreeRef"
        :data="projectData"
        :highlight-current="true"
        :default-expand-all="true"
        node-key="id"
        :props="treeProps"
        @node-click="handleNodeClick"
      />
    </el-drawer>
  </div>
</template>
